import React,{useMemo,useState} from "react";
export default function App(){
  console.log('重新渲染');
  //初始化数据
  const [number1,setNumber1] =useState(1)
  const [number2,setNumber2] =useState(2)
  const [count,setCount] = useState(3)
  const [test,setTest] =useState([1,2,3])

  //根据number1和number2计算一个结果 供组件使用
  //如果直接计算,则无论什么情况下组件重新渲染,都会再次计算result
  // const result = number1 + number2;

  //使用useMemo来缓存计算的结果,当只有依赖项发生改变的时候才会重新计算
  //useMemo的使用场景：父组件将一个 【值】 传递给子组件时，若父组件的其他值发生变化时，子组件也会跟着渲染多次，会造成性能浪费。使用useMemo将父组件传递给子组件的值缓存起来，只有当 useMemo中的第二个参数状态变化时，子组件才重新渲染
  const result = useMemo(()=>{
    // console.log(useMemo);
    return number1 + number2;
  },[number1, number2])

  // const testResult = test.map(item =>{
  //   console.log('回调函数触发'); //此时不使用useMemo的时候，每次改变number1，number2或count都会引起该回调函数触发
  //   return item
  // })

  const testResult = useMemo(() => {
    return test.map(item => {
      console.log("回调函数触发");
      return item
    })
  }, [test]);
  console.log(testResult);

  return (
    <div>
      <h1>App</h1>
      <p>{number1}+{number2}={result}</p>
      <p>count:{count}</p>
      <button onClick={()=>{
        setNumber1(x=>x+1)
      }}>改变number1</button>
      <button onClick={()=>{
        setNumber2(x=>x+1)
      }}>改变number2</button>
      <button onClick={()=>{
        setCount(x=>x+1)
      }}>改变count</button>
      <button onClick={() => {
        setTest([...test, 1])
      }}>改变test</button>
    </div>
  )
}

